<template>
  <div class="container" style="padding: 0;margin: 0;">
    <div class="grid-container">
      <div class="row row-1">
        <div class="w_full flex-col">
          <span class="title">字典编辑</span>
          <div class="flex-row comm_border" style="height: 80px;margin-top: 16px;">
            <div class="w_full flex-row-center">
              <span class="search_title" style="margin-left: 24px">类型</span>
              <el-select clearable class="search_select" size="large"
                         style="margin-left: 8px; width: 200px;"
                         v-model="data.selectedDictTypeId"
                         placeholder="请选择类型">
                <el-option
                    v-for="(qtType, index) in data.listDictTypeValue"
                    :key="index"
                    :label="qtType.value"
                    :value="qtType.key"
                ></el-option>
              </el-select>
            </div>
            <div class="flex-row-center">
              <el-button type="primary" @click="click_search" style="margin-right: 24px;width: 88px;height: 44px">查询
              </el-button>
            </div>
          </div>
          <div class="flex-row-center" style="margin-top: 16px; height:80px;justify-content: space-between">
            <el-button style="width:114px;height: 48px;border-radius: 12px" type="primary" :icon="Plus"
                       @click="click_create">新增
            </el-button>
            <el-input placeholder="请输入" v-model="data.searchName"
                      style="width:412px;height: 48px;border-radius: 12px"
                      :prefix-icon="Search"></el-input>
          </div>
        </div>
      </div>
      <div class="row row-2 full">
        <div class="scrollable-content full">
          <div class="flex_1" style="margin: 0">
            <el-table :data="data.listDict" border>
              <el-table-column prop="index" label="序号" width="60"/>
              <el-table-column prop="dictType" label="字典类型" min-width="5%"/>
              <el-table-column prop="dictName" label="字典值" min-width="5%"/>
              <el-table-column prop="createTimeStr" label="创建时间" width="180"/>
              <el-table-column label="操作" width="120px">
                <template #default="scope">
                  <div class="flex-row-center">
                    <el-button link size="small" @click="click_edit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button link size="small" @click="click_delete(scope.$index, scope.row)">删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="row row-3 w_full">
        <div class="flex-row-center w_full"
             style="flex-direction: row-reverse ;margin-top: 14px;height: 50px;">
          <el-pagination
              v-model:current-page="pager.currentPage"
              v-model:page-size="pager.pageSize"
              :page-sizes="[10,20,30,50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pager.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, shallowRef} from "vue";
import {Plus, Search} from "@element-plus/icons-vue";
import {ElNotification} from "element-plus";
import {ListExamStatusInfo} from "@/constants/Constants_ListExamStatusInfo";
import {addDialog} from "@/components/gDialog/index";
import msg from "@/components/msg";
import {DictInfoVO} from "@/type/vo/DictInfoVO";
import {DictQueryDto} from "@/type/dto/DictQueryDto";
import {api_deleteDict, api_getPageListDict} from "@/request/apis/assistantApi";
import AddDictDialog from "@/views/User/Dialogs/AddDictDialog.vue";
import {StringString} from "@/type/dto/KeyValue";
import {DICT_TYPE_LEVEL, DICT_TYPE_POSITION, DICT_TYPE_TITLE} from "@/constants/Constants_DictType";


const data = reactive({
  dtStart: '',
  dtEnd: '',
  searchName: '',
  selectStatus: -1,
  listStatus: ListExamStatusInfo,
  selectedDictTypeId: '',
  listDictTypeValue: Array<StringString>(),
})
data.listDictTypeValue.push({
  key: DICT_TYPE_TITLE,
  value: '职称'
})
data.listDictTypeValue.push({
  key: DICT_TYPE_LEVEL,
  value: '能级'
})
data.listDictTypeValue.push({
  key: DICT_TYPE_POSITION,
  value: '岗位'
})
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})


onMounted(async () => {
  await search_pri();
})

const click_create = () => {
  try {
    addDialog({
      title: "新增字典",
      component: shallowRef(AddDictDialog),
      width: "400px",
      props: {},
      callBack: async (dRet: boolean) => {
        await search_pri();
      }
    })
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }


}

const click_edit = async (index: number, dictItem: DictInfoVO) => {
}

const click_delete = async (index: number, dictItem: DictInfoVO) => {
  try {
    const rDialog = await msg.yesNo(
        `是否确认删除问卷 ${exam.title}?`,
        '警告'
    );
    if (rDialog) {
      const r = await api_deleteDict(dictItem.dictId);
      if (!r) {
        await msg.info('数据异常');
        return;
      }
      if (r.code != 0) {
        await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
        return;
      }
      await search_pri();
      ElNotification({
        title: '提示',
        message: '已删除!',
      })
    }
  } catch (error) {
    // 处理取消操作
  }
}

const search_pri = async () => {

  const limit = pager.pageSize;
  const page = pager.currentPage;
  const query: DictQueryDto = {
    limit: limit,
    page: page,
    dictType: data.selectedDictTypeId
  }
  // let dtEnd = data.dtStart ? timeStrAsTick(data.dtEnd) : null;

  const r = await api_getPageListDict(query);
  if (!r) {
    await msg.info('数据异常');
    return;
  }
  if (r.code != 0) {
    await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
    return;
  }
  if (r.data.records) {
    for (let i = 0; i < r.data.records.length; i++) {
      r.data.records[i].index = i + 1;
    }
  }
  data.listDict = r.data.records;
  pager.total = r.data.total;
}

const click_search = async () => {
  await search_pri();
};

const handleSizeChange = async (val: number) => {
  await search_pri();
}
const handleCurrentChange = async (val: number) => {
  await search_pri();
}

</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-1,
.row-3 {
}

.row-2 {
  overflow: auto;
}

.scrollable-content {

  line-height: 1.5em;
}


.title {
  font-size: 24px;
  font-weight: 600;
  color: #0A1629;
  line-height: 28px;
}

.label_title {
  font-size: 16px;
  font-weight: 400;
  color: #595959;
  line-height: 24px;
}

.date-picker {
  height: 48px;
  color: black;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #DCDCDC;
}

.el-scrollbar__view {
  height: calc(100% - 100px); /* 根据实际情况调整高度 */
}

.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  margin: 10px;
  color: var(--el-color-primary);
  overflow: hidden;
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.naireName {
  font-size: 20px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
}

.status {
  font-size: 16px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
  margin-left: 7px;
}

.btn1 {
  border: none;
  margin-left: 24px;
  width: auto;

  padding: 0;
}


</style>
